<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h4 class="modal-title">{{{ trans('dear.dear-title') }}}</h4>
</div>
<div class="portlet modal-body portlet-body form">
    <!-- BEGIN FORM-->
    <form action="{{ $url }}" class="form-horizontal" id="form-dear" method="post">
        <div class="form-body">
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="alert"></button>
                <span>{{ trans('validation.custom.error-title') }}</span>
            </div>
            <div class="alert alert-success display-hide">
                <button class="close" data-close="alert"></button>
                <span>{{ trans('validation.custom.success-title') }}</span>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-4" for="relationship">{{ trans('options-pages.relationship_option') }}</label>
                <div class="col-md-8">
                    <select class="form-control" name="relationship" id="relationship">
                        @foreach ( $Option['RELATIONSHIP'] as $key => $Object)
                        <option value="{{ $key }}" {{ @$Dear->relationship == $key ? 'selected=""' : null }}>{{ $Object->data }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-4" for="saint">{{ trans('user.saint') }}</label>
                <div class="col-md-8">
                    <input type="text" name="saint" id="saint" class="form-control" value="{{@$Dear->saint}}"/>
                </div>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-4" for="dearname">{{ trans('user.username') }} <span class="required">*</span></label>
                <div class="col-md-8">
                    <input type="text" name="dearname" id="dearname" class="form-control" value="{{@$Dear->dearname}}"/>
                </div>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-4" for="phone">{{ trans('user.phone') }}</label>
                <div class="col-md-8">
                    <input type="text" name="phone" id="phone" class="form-control" value="{{@$Dear->phone}}"/>
                </div>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-4" for="address">{{ trans('user.address') }}</label>
                <div class="col-md-8">
                    <input type="text" name="address" id="address" class="form-control" value="{{@$Dear->address}}"/>
                </div>
            </div>
        </div>
    </form>
    <!-- END FORM-->
</div>
<div class="modal-footer">
    <button type="button" class="btn default btn-close-modal" data-dismiss="modal">{{ trans('system.button.cancel') }}</button>
    <button type="button" class="btn blue btn-new-options">{{ trans('system.button.submit') }}</button>
</div>

{{ HTML::script('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}

<script type="text/javascript">

    var form = $('#form-dear');
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);

    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            dearname: {
                required: true
            }
        },
        messages: {
            dearname: {
                required: "{{ trans('validation.required', ['attribute' => trans('user.username') ]) }}"
            }
        },
        invalidHandler: function(event, validator) { //display error alert on form submit              
            success.hide();
            error.show();
            Metronic.scrollTo(error, -200);
        },
        errorPlacement: function(error, element) { // render error placement for each input type
            if (element.parent(".input-group").size() > 0) {
                error.insertAfter(element.parent(".input-group"));
            } else if (element.attr("data-error-container")) {
                error.appendTo(element.attr("data-error-container"));
            } else if (element.parents('.radio-list').size() > 0) {
                error.appendTo(element.parents('.radio-list').attr("data-error-container"));
            } else if (element.parents('.radio-inline').size() > 0) {
                error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
            } else if (element.parents('.checkbox-list').size() > 0) {
                error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
            } else if (element.parents('.checkbox-inline').size() > 0) {
                error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
            } else {
                error.insertAfter(element); // for other inputs, just perform default behavior
            }
        },
        highlight: function(element) { // hightlight error inputs
            $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group   
        },
        unhighlight: function(element) { // revert the change done by hightlight

        },
        success: function(label, element) {
            var icon = $(element).parent('.input-icon').children('i');
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            icon.removeClass("fa-warning").addClass("fa-check");
        },
        submitHandler: function(form) {
            success.show();
            error.hide();
        }
    });

    $('.btn-new-options').click(function() {
        if (!form.valid()) {
            return;
        }

        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'json'
        }).done(function(response) {
            if (response.code == 200) {
                success.find('span').html(response.message);
                success.show();
                error.hide();
                $('.btn-close-modal').click();
            }
            else {
                error.find('span').html(response.message);
                error.show();
                success.hide();
            }
        })
                .fail(function() {
                    error.find('span').text('Check Your Connection.');
                    error.show();
                    success.hide();
                });
    });
</script>